---
title: CSS Transition
description: The CSSTransition component or useCSSTransition hook should be used when an element should have a CSS transition when it mounts, unmounts, or dynamically based on some flag.
docType: Demo
docGroup: Components
group: Transition
hooks: [useCSSTransition]
components: [CSSTransition]
---

# CSS Transition

The `CSSTransition` component or `useCSSTransition` hook should be used when an
element should have a CSS transition when it mounts, unmounts, or dynamically
based on some flag. The transitions are built into existing `react-md`
components like the [Dialog](/components/dialog), [Menu](/components/menu), and
[Overlay](/components/overlay).

Some existing transitions can be found at:

- [Collapse](/components/collapse)
- [CrossFade](/components/cross-fade)
- [Scale](/components/scale)
- [Slide](/components/slide)

> !Info! Check out the [useTransition](/hooks/use-transition) hook for
> additional options and info around the transition stages.

## Simple CSSTransition Example

To create a CSS Transition:

- toggle a `transitionIn` flag
- define a `timeout` for the transition which can be a number or an object
  - the object should define an `enter` and `exit` duration in milliseconds
  - otherwise the number will be applied to both the enter and exit transitions
    in milliseconds
- define the `classNames` to apply at the different transition stages which can
  be a string or an object
  - the object should define any optional class names for the `enter`,
    `enterActive`, `enterDone`, `exit`, `exitActive`, and `exitDone` stages
  - if it is a string, class names will be generated at
    `${classNames}--${stage}`

The transitionable component **must** accept a `ref` and a `className`.

```demo source="./SimpleCSSTransitionExample.tsx"

```

### Simple useCSSTransition Example

This is the same example as above, but using the `useCSSTransition` hook instead
of the `CSSTransition` component.

```demo source="./SimpleUseCSSTransitionExample.tsx"

```

## Temporary Elements Transitions

The CSS Transition really shines for temporary elements that should have enter
and exit transitions since it also returns a `rendered` flag that will be
`false` once the exit transition has completed. Enable the `temporary` prop on
the `CSSTransition` component or `useCSSTransition` hook to enable this feature.

```demo source="./TemporaryElementsTransitionsExample.tsx"

```

### Display None Example

Instead of unmounting the component while `transitionIn` is false, another
option is to hide it in the DOM by using `display: none`. Enable the
`exitedHidden` option instead of `temporary`.

The main benefit to this behavior is that the state of the temporary element
will not reset since it is never unmounted.

```demo source="./DisplayNoneExample.tsx"

```

## Appear Transition

The enter transition will not occur by default if a component mounts with
`transitionIn` set to `true` since this is considered an "appear" transition. If
this behavior is desired, enable the `appear` option which defaults to reusing
all the same styles and timeouts as the `enter` stages.

```demo source="./AppearTransitionExample.tsx"

```

### CSS-Only Appear Transition

If the component only requires a transition on first mount, it is recommended to
use a CSS-only transition instead to reduce the javascript bundle size. Here is
the same example as above but using css instead of the `useCSSTransition` hook.

```demo source="./CSSOnlyAppearTransitionExample.tsx"

```
